<template>
  <el-row>
    <el-col :span="inputColSpan">
      <el-table
        v-for="(input, index) in data.inputs"
        :key="index"
        :data="input?input.values:null"
        style="width: 95%"
      >
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item v-for="item in input.fields" :key="item.name" :label="item.label + ' :'">
                <span style="color: #aaa;">{{ '{' + props.row[item.name].type + '}' }}</span>
                <span v-if="props.row[item.name].type==='STRING'" style="color: #008000;">
                  {{ '"'+props.row[item.name].value+'"' }}
                </span>
                <span
                  v-else-if="props.row[item.name].type==='MAP'
                    || props.row[item.name].type==='LIST'
                    || props.row[item.name].type==='LIST_MAP'"
                  style="color: #000;"
                >
                  <vue-json-pretty :data="props.row[item.name].value" :deep="2" />
                </span>
                <span v-else style="color: blue;">
                  {{ props.row[item.name].value }}
                </span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column label="流入的数据" prop="_index" />
      </el-table>
    </el-col>
    <el-col :span="outputColSpan">
      <el-table
        v-for="(output, index) in data.outputs"
        :key="index"
        :data="output?output.values:null"
        style="width: 95%"
      >
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item v-for="item in output.fields" :key="item.name" :label="item.label">
                <span style="color: #aaa;">{{ '{' + props.row[item.name].type + '}' }}</span>
                <span v-if="props.row[item.name].type==='STRING'" style="color: #008000;">
                  {{ '"'+props.row[item.name].value+'"' }}
                </span>
                <span
                  v-else-if="props.row[item.name].type==='MAP'
                    || props.row[item.name].type==='LIST'
                    || props.row[item.name].type==='LIST_MAP'"
                  style="color: #000;"
                >
                  <vue-json-pretty :data="props.row[item.name].value" :deep="2" />
                </span>
                <span v-else style="color: blue;">
                  {{ props.row[item.name].value }}
                </span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column :label="'流出的数据' + (data.outputs.length>1?' {'+(index+1)+'}':'')" prop="_index" />
      </el-table>
    </el-col>
  </el-row>
</template>

<script>
import VueJsonPretty from 'vue-json-pretty'

export default {
  name: 'PhuketPanelPreview',
  components: {
    VueJsonPretty
  },
  props: {
    data: {
      type: Object,
      required: false,
      default: () => {}
    }
  },
  computed: {
    inputColSpan() {
      return !this.data.inputs ? 0 : (!this.data.outputs ? 24 : 12)
    },
    outputColSpan() {
      return !this.data.outputs ? 0 : (!this.data.inputs ? 24 : 12)
    }
  }
}
</script>
